import { defineComponent, h, markRaw } from 'vue'
import ContainerNode from '../../ItemNode/ContainerNode'
import {
  ElForm,
  ElFormItem,
  ElIcon,
  ElInput,
  ElPopover,
  ElRadioButton,
  ElRadioGroup,
  ElTabPane,
  ElTabs,
  ElTag,
  ElText
} from 'element-plus'
import classes from '../../ItemNode/ItemNode.module.css'
import { Edit } from '@element-plus/icons-vue'

export default class NTabs extends ContainerNode {
  isNTabs = true
  isDataDisplayNode = true

  constructor(node?: NTabs) {
    super(node)

    if (!node) {
      this.path = './components/NTabs/NTabs.tsx'
      this.name = '标签页容器'

      this.props.style.minHeight = '100px'
      this.props.type = ''
      this.props.tabPosition = 'top'
    }

    const pComponent = this.component
    this.component = markRaw(
      defineComponent(
        (props) => {
          return () => (
            <pComponent>
              <ElTabs type={this.props.type} tabPosition={this.props.tabPosition}>
                {() =>
                  this.children.map((child, i) =>
                    // 加key会导致不刷新渲染
                    h(ElTabPane, { label: child.name, lazy: true }, () => h(child.component))
                  )
                }
              </ElTabs>
            </pComponent>
          )
        },
        {
          name: 'NTabs'
        }
      )
    )

    const pView = this.view
    this.view = markRaw(
      defineComponent((props) => {
        this.props.style.minHeight = ''

        return () => <pView></pView>
      })
    )

    const pParams = this.params
    this.params = markRaw(
      defineComponent(() => {
        return () => (
          <pParams>
            <div class={classes['params-item']}>
              <ElText class={classes['params-item-label']} type="info">
                类型
              </ElText>
              <div class={classes['params-item-content']}>
                <ElRadioGroup v-model={this.props.type} size="small">
                  <ElRadioButton value="" label="默认" size="small"></ElRadioButton>
                  <ElRadioButton value="card" label="卡片" size="small"></ElRadioButton>
                  <ElRadioButton value="border-card" label="边框卡片" size="small"></ElRadioButton>
                </ElRadioGroup>
              </div>
            </div>
            <div class={classes['params-item']}>
              <ElText class={classes['params-item-label']} type="info">
                选项卡位置
              </ElText>
              <div class={classes['params-item-content']}>
                <ElRadioGroup v-model={this.props.tabPosition} size="small">
                  <ElRadioButton value="top" label="上" size="small"></ElRadioButton>
                  <ElRadioButton value="right" label="右" size="small"></ElRadioButton>
                  <ElRadioButton value="bottom" label="下" size="small"></ElRadioButton>
                  <ElRadioButton value="left" label="左" size="small"></ElRadioButton>
                </ElRadioGroup>
              </div>
            </div>
            <div class={classes['params-item']}>
              <ElText class={classes['params-item-label']} type="info">
                选项卡
              </ElText>
              <div class={classes['params-item-content']}>
                {this.children.map((tag) => (
                  <ElTag key={tag} type="primary" effect="dark" size="small">
                    {tag.name}
                    <ElPopover width={180} trigger="click" teleported={false} placement="top">
                      {{
                        reference: () => (
                          <ElIcon color="var(--el-color-warning)">
                            <Edit></Edit>
                          </ElIcon>
                        ),
                        default: () => {
                          return (
                            <>
                              <ElForm label-width="80px">
                                <ElFormItem label="选项卡标题">
                                  <ElInput v-model={tag.name}></ElInput>
                                </ElFormItem>
                              </ElForm>
                            </>
                          )
                        }
                      }}
                    </ElPopover>
                  </ElTag>
                ))}
              </div>
            </div>
          </pParams>
        )
      })
    )
  }

  toVue(): SfcObj {
    const sfcObj = super.toVue()

    sfcObj.imports = {
      ...sfcObj.imports,
      'element-plus': {
        ElTabs: 'ElTabs',
        ElTabPane: 'ElTabPane'
      }
    }

    sfcObj.template = sfcObj.template.replace(
      '<slot></slot>',
      `
  <ElTabs
    type="${this.props.type}"
    tabPosition="${this.props.tabPosition}"
  >
    ${this.children.map((child, i) => `<ElTabPane label="${child.name}" lazy >\n      ${child.uuid}\n    </ElTabPane>`).join('\n  ')}
  </ElTabs>
       `
    )

    return sfcObj
  }
}
